<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container" id="container">
        <!-- <div class="product-item">
            <img src="https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/online/course/icon/20220222/5e1bc14bcc8b4ea493e953c4d8c2c39c.png"
                alt="">
            <p>【最家】不锈钢壁饰墙饰软装</p>
            <strong>688</strong>
        </div> -->
    </div>

    <script>
       
        let productsData = [
            {
                image: 'https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/online/course/icon/20220222/5e1bc14bcc8b4ea493e953c4d8c2c39c.png',
                name: '【最家】不锈钢壁饰墙饰软装',
                price: 688,
                id: 1
            },
            {
                image: 'https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/online/course/icon/20220222/5e1bc14bcc8b4ea493e953c4d8c2c39c.png',
                name: '【最家】不锈钢壁饰墙饰软装',
                price: 78,
                id: 2
            },
            {
                image: 'https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/online/course/icon/20220222/3bfe1da6fd5449cea7b26b22f3283d31.png',
                name: '【最家】不锈钢壁饰墙饰软装',
                price: 88,
                id: 3
            },
            {
                image: 'https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/online/course/icon/20220222/5e1bc14bcc8b4ea493e953c4d8c2c39c.png',
                name: 'xxxxx',
                price: 1088,
                id: 4
            },
        ];


        const containerEle = document.querySelector("#container");

        // productsData.forEach(item => {
        //     containerEle.innerHTML += (
        //         `
        //         <div class="product-item">
        //             <img src="${item.image}" alt="">
        //             <p>${item.name}</p>
        //             <strong>${item.price}</strong>
        //         </div>
        //         `
        //     )
        // })


        containerEle.innerHTML = productsData.map(item => {
            // 每一轮循环，都将商品的HTML结构拼接好，组成一个字符串，返回给map的新数组
            return (
                `
                <div class="product-item">
                    <img src="${item.image}" alt="">
                    <p>${item.name}</p>
                    <strong>${item.price}</strong>
                </div>
                `
            )
        }).join("") // 将数组中所有的商品字符串，拼接成一个大字符串





    </script>
</body>

</html>